<template>
	<div class="index_city">
		<header>
			<img src="../../assets/film/fanhui@3x.png" alt="" @click="filmReturn" class="film_city_return" />
			<div class="film_city_search">
				<img src="../../assets/film/search.png" alt="" />
				<input type="text" placeholder="城市，车站的中文或拼音" v-model="searchValue" @input="search" />
			</div>
		</header>
		<div class="film_city_zhan"></div>
		<div class="film_city_content" v-if="searchValue==''">
			<div class="film_city_city">
				<div class="film_city_map" ref="now"></div>
				<div class="film_city_city_title">
					当前定位城市
				</div>
				<div class="film_city_city_cityName">
					<div v-if="scenic_cityname==''">定位失败</div>
					<div @click="changeCity(scenic_cityname)" v-else>{{scenic_cityname}}</div>
				</div>
			</div>
			<div class="film_city_city" v-if="indexhistorylist.length">
				<div class="film_city_map" ref="history"></div>
				<div class="film_city_city_title">
					历史搜索：
				</div>
				<div class="air_city_city_air wccy-after">
					<div v-for="item in indexhistorylist" @click="changeCity(item.cityname)">{{item.cityname}}</div>
				</div>
			</div>
			<div class="film_city_city">
				<div class="film_city_map" ref="hot"></div>
				<div class="film_city_city_title">
					热门搜索：
				</div>
				<div class="film_city_city_cityName">
					<div v-for="item in hotList" @click="changeCity(item.cityname)">{{item.cityname}}</div>
				</div>
			</div>
		</div>
		<div class="film_city_list" v-if="searchValue==''">
			<div v-for="item,key in cityList">
				<div :ref="item.letter" class="film_city_map"></div>
				<div class="film_city_list_letter">{{item.letter}}</div>
				<div v-for="val,index in item.cityList" class="film_city_list_name">
					<div @click="changeCity(val.name)">
						{{val.name}}
					</div>
				</div>
			</div>
		</div>
		<!--搜索用-->
		<div v-else>
			<div v-for="item in searchList" class="film_city_list_name" v-show="searchList.length">
				<div @click="changeCity(item.name,item.id)">{{item.name}}</div>
			</div>
			<div class="film_city_search_null" v-if="!searchList.length">抱歉，暂时没有找到相关的城市</div>
		</div>
		<!--侧边字母-->
		<div v-if="searchValue==''" class="film_city_nav">
			<div :class="{film_city_nav_active : nowNav == 'now'}" @click="skip('now')">当前</div>
			<div :class="{film_city_nav_active : nowNav == 'history'}" @click="skip('history')">历史</div>
			<div :class="{film_city_nav_active : nowNav == 'hot'}" @click="skip('hot')">热门</div>
			<div v-for="item,key in cityList" :class="{film_city_nav_active : nowNav == item.letter}" @click="skip(item.letter)">
				{{item.letter}}
			</div>
		</div>
	</div>
</template>

<script>
//	import { mapState } from "vuex";
	import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				cityId:"",//获取城市id
				cityList: [], //城市列表
				searchValue: "", //搜索内容
				hotList: [
					{cityname:"北京",cityid:1,latitude:'39.929985',longitude:'116.395645'},
					{cityname:"成都",cityid:59,latitude:'30.679943',longitude:'104.067924'},
					{cityname:"广州",cityid:20,latitude:'23.120049',longitude:'113.30765'},
					{cityname:"杭州",cityid:50,latitude:'30.259245',longitude:'120.219376'},
					{cityname:"南京",cityid:55,latitude:'32.057236',longitude:'118.778076'},
					{cityname:"上海",cityid:10,latitude:'31.24916',longitude:'121.4879'},
					{cityname:"石家庄",cityid:76,latitude:'38.048958',longitude:'114.52208'},
					{cityname:"苏州",cityid:80,latitude:'31.317987',longitude:'120.6199'},
					{cityname:"深圳",cityid:30,latitude:'22.546053',longitude:'114.02597'},
					{cityname:"天津",cityid:40,latitude:'39.14393',longitude:'117.210815'},
					{cityname:"武汉",cityid:57,latitude:'30.581083',longitude:'114.3162'},
					{cityname:"西安",cityid:42,latitude:'42.986366',longitude:'125.15015'},
				],
				searchList: [],
				nowNav: "当前",
				indexhistorylist:[],//历史城市
			}
		},
		mounted() {
			var list = localStorage.getItem('indexHistorycity');
			list?this.indexhistorylist = JSON.parse(list):[];
			if(localStorage.getItem("movieCityList")){
				let that = this;
				var cityList = JSON.parse(localStorage.getItem("movieCityList"));

				cityList && cityList.forEach((item)=>{
					item.cityList && item.cityList.forEach((item2)=>{
						if(item2.name == that.scenic_cityname){
							that.cityId = item2.id;
						}
					})
					
				})
				this.cityList =cityList;
			}
			
			
		},
		methods: {
			filmReturn() { //回退	
				this.$router.go(-1);
			},
			
			search() { //搜索
				var searchValue = this.searchValue;
				if(searchValue.length > 0) { //筛选过滤
					var searchList = [];
					this.cityList.forEach(function(item, index) {
						item.cityList.forEach(function(val, key) {
							(val.name.indexOf(searchValue) >= 0 || val.pinyinName.toLowerCase().indexOf(searchValue) >= 0 || val.acronym.toLowerCase().indexOf(searchValue) >= 0) && (searchList.push(val));
						})
					});
					this.searchList = searchList;
				} else {
					this.searchList.length = 0;
				}
			},
			skip(str) {
				this.nowNav = str;
				//动画跳转
				let top = (this.$refs[str].offsetTop || this.$refs[str][0].offsetTop);//div 高度
				let distance = document.documentElement.scrollTop || document.body.scrollTop;//滚动条高度;
				let dis = top - distance; //需要移动的距离
				//每次移动的距离
				let step = dis / 50;
				var timer = setInterval(function(){
					var flag =  (dis > 0) ? (distance < top) : (distance > top);
					if (flag) {
						distance += step;
						document.body.scrollTop = distance;
						document.documentElement.scrollTop = distance;
					} else {
						document.body.scrollTop = top;
						document.documentElement.scrollTop = top;
						clearInterval(timer);
					};
				},10);
			},
			changeCity(cityName){//变更当前城市
				var value = localStorage.getItem('indexHistorycity');
				var item = {cityname:cityName};
			    if (value) {   //判断有没有历史记录
			        var issave = true;
			        var value = JSON.parse(value);
			        value.forEach((item, index) => {
			          if (item.cityname == cityName) {
			            issave = false
			          }
			        })
			        if (issave) {  //储存历史记录
			          if (value.length > 4) {
			            value = value.slice(1, value.length)
			          }
			          value.push(item)
			        }
			        localStorage.setItem('indexHistorycity', JSON.stringify(value));
			    } else {
			        var historycity = [];
			        historycity.push(item);
			        localStorage.setItem('indexHistorycity',JSON.stringify(historycity));
			    }

          this.cityinfo.cityName = cityName
			    this.$store.commit('CITYINFO',this.cityinfo);
				this.$router.go(-1);
			}
		},
		created() {
			
		},
		watch: { //监听放置

		},
		filters: { //过滤

		},
		components: {},
		computed: {
//			...mapState({
//				cityname:state=>state.common.cityinfo.cityName,
//      		cityinfo:state=>state.common.cityinfo
//			}),
			...mapGetters([
				'cityname',
				'cityinfo',
				'scenic_cityname'
			]),
		}
	};
</script>
<style scoped>
	/*顶部搜索*/
	
	.index_city {
		background-color: #F4F5F9;
	}
	
	.film_city_zhan {
		height: 88px;
	}
	
	.index_city>header {
		height: 88px;
		display: flex;
		padding: 0 30px;
		justify-content: flex-start;
		align-items: center;
		background-color: #fff;
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
	
	.film_city_return {
		width: 25px;
		height: 44px;
		margin-right: 28px;
	}
	
	.film_city_search {
		width: 540px;
		height: 60px;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
	}
	
	.film_city_search>input {
		width: 100%;
		height: 100%;
		border-radius: 30px;
		box-sizing: border-box;
		border: 0;
		background-color: #F6F7FA;
		padding-left: 65px;
		outline: none;
	}
	
	.film_city_search>img {
		position: absolute;
		top: 16px;
		left: 18px;
		width: 27px;
		height: 27px;
		font-size: 26px;
	}
	/*城市信息*/
	
	.film_city_content {
		margin-top: 68px;
	}
	
	.film_city_city {
		padding: 0 28px;
		font-size: 28px;
		color: #8a8a8a;
		padding-right: 88px;
	}
	
	.film_city_city>.film_city_map{
		position: relative;
		top: -100px;
		left: 0;
	}
	
	.film_city_city_title {
		margin-bottom: 32px;
	}
	
	.film_city_city_title {
		margin-bottom: 32px;
	}
	
	.film_city_city_cityName {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.film_city_city_cityName>div {
		width: 146px;
		height: 55px;
		background-color: #fff;
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26px;
		color: #333333;
		margin-bottom: 30px;
	}
	
	.film_city_list>div>.film_city_map {
		position: relative;
		top: -88px;
		left: 0;
	}
	
	.film_city_list_letter {
		height: 48px;
		padding-left: 27px;
		width: 100%;
		box-sizing: border-box;
		color: #4c4c4c;
		font-size: 28px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: #E8E9EF;
	}
	
	.film_city_list_name {
		background-color: #fff;
		padding-left: 70px;
	}
	
	.film_city_list_name>div {
		height: 70px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1px solid #959595;
		font-size: 26px;
		color: #333333;
	}
	
	.film_city_list_name:last-child>div {
		border: 0;
	}
	
	.film_city_search_null {
		display: flex;
		justify-content: center;
		font-size: 28px;
		color: #000;
		background-color: #fff;
		padding-top: 15px;
	}
	
	.film_city_nav {
		position: fixed;
		top: 160px;
		right: 12px;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 36px;
		box-sizing: border-box;
		color: #8a8a8a;
	}
	
	.film_city_nav>div:nth-child(-n+3) {
		color: #333333;
	}
	
	.film_city_nav>.film_city_nav_active {
		color: #81d4d3!important;
	}
	.air_city_city_air{
		
	}
	.air_city_city_air>div {
		width: 146px;
		height: 55px;
		background-color: #fff;
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26px;
		color: #333333;
		margin-bottom: 30px;
		float: left;
		margin-right: 12px;
	}
</style>
